<template>
	<view class="page">
		<demo-block title="栗子海报">
		<l-painter css="width: 750rpx; padding-bottom: 100rpx; background: linear-gradient(180deg,#ff971b 0%, #ff5000 100%)" 
				@fail="fail"
				@done="done"				
				pathType="url"
				ref="poster"
				performance
				>
			<l-painter-image :src="data.avatar"  css="background: #ffffff; object-fit: cover; margin-left: 40rpx; margin-top: 40rpx; width: 84rpx; border: 2rpx solid #ffffff; box-sizing: border-box; height: 84rpx; border-radius: 50%;"/>
			<l-painter-view css="margin-top: 40rpx; padding-left: 20rpx; display: inline-block">
				<l-painter-text :text="data.user_name" css="display: block; padding-bottom: 10rpx; color: #ffffff; font-size: 32rpx; fontWeight: bold"/>
				<l-painter-text :text="data.top_msg" css="color: rgba(255,255,255,.7); font-size: 24rpx"/>
			</l-painter-view>
			<l-painter-view css="margin-left: 40rpx; margin-top: 30rpx; padding: 32rpx; box-sizing: border-box; background: #ffffff; border-radius: 16rpx; width: 670rpx; box-shadow: 0 20rpx 58rpx rgba(0,0,0,.15)">
				<l-painter-image :src="data.img"  css="object-fit: cover; object-position: 50% 50%; width: 606rpx; height: 606rpx;"/>
				<l-painter-view css="margin-top: 32rpx; color: #FF0000; font-weight: bold; font-size: 28rpx; line-height: 1em;">
					<l-painter-text :text="data.slogan" css="vertical-align: bottom; font-size: 36rpx"/>
				</l-painter-view>
				<l-painter-view css="margin-top: 32rpx; font-size: 26rpx; color: #8c5400">
					<l-painter-text v-for="(item,index) in data.tag" :index="index" :key="index" :text="item" css="margin-left: 16rpx; background: #fff4d9"/>
				</l-painter-view>
				<l-painter-view css="margin-top: 30rpx; display: flex">
					<l-painter-text css="text-indent: calc(tag.width + 10rpx); flex: 1; padding-right: 20rpx; box-sizing: border-box; line-clamp: 2; color: #333333; line-height: 1.8em; font-size: 36rpx;" 
						:text="data.desc"></l-painter-text>
					<l-painter-qrcode css="width: 128rpx; height: 128rpx;" :text="url"></l-painter-qrcode>
				</l-painter-view>
			</l-painter-view>
		</l-painter>
	</demo-block>
	</view>
</template>

<script>
	import * as confirm from '@/common/confirm.js'
	import * as auth from '@/common/authorize.js'
	
	import {mapGetters} from 'vuex'
	
	export default {
		props: {
			data:{
				type:Object,
				default:""
			}
		},
		data: () => ({
			url: '',
			show: false,
		}),
		computed:{
			...mapGetters(['uid']),
		},
		mounted() {
			this.url=this.data.url+this.uid
			uni.showLoading({
				title:"海报生成中!!!"
			})
		},
		methods: {
			close() {
				this.show = false
			},
			fail(v) {
				uni.hideLoading()
				console.log(v)
			},
			done(v) {
				uni.hideLoading()
				
				setTimeout(()=>{
					confirm.choose("海报生成成功,需要保存到相册吗?",()=>{
						auth.getWritePhotosAlbumAuth({
							need_setting:false,
							success:()=>{
								this.save()
							},
							fail:()=>{
								confirm.warn("您拒绝了授权,无法保存图片,您可以'我的->右上角设置->权限设置'修改权限。")
							}
						})					
						
					})
				},500)
				
			},
			save() {
				this.$refs.poster.canvasToTempFilePathSync({
					fileType: 'jpg',
					quality: 1,
					success: (res) => {
						console.log(res.tempFilePath)
						this.picture2 = res.tempFilePath
						this.saveImage()
					},
					fail(e) {
						console.log('???????????',e)
					}
				})
			},
			// 保存图征
			saveImage() {
				uni.saveImageToPhotosAlbum({
					filePath: this.picture2,
					success(res) {
						uni.showToast({
							title: '已保存到相册',
							icon: 'success',
							duration: 2000
						});
					},
					fail(e) {
						console.log('???????????',e)
					}
				});
			}
		}
	};
</script>

<style lang="stylus" scoped>

</style>
